<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="logo-box">
        <i class="el-icon-plane"></i>
      </div>
      <h2 class="title">航空管理系统</h2>
      <h3 class="subtitle">管理员登录</h3>
      <el-form
          :model="form"
          :rules="rules"
          ref="loginForm"
          label-position="top"
          class="login-form">
        <el-form-item prop="username">
          <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="管理员账号">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="密码"
              @keyup.enter.native="login">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="login()">登录系统</el-button>
        </el-form-item>
        <div class="login-options">
          <el-link type="primary" @click="jump()">
            <i class="el-icon-right"></i>
            切换到用户登录
          </el-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ValidCode from "@/components/ValidCode.vue";
import request from "@/utils/request";

export default {
  name: "Login",
  created() {
    document.title = '欢迎登录';
  },
  components:{
    ValidCode,
  },
  data() {
    return {
      form: {
        username:'admin',
        password: '123'
      },
      validCode: "",
      // 表单数据验证规则
      rules: {
        username: [
          { required: true, message: "请输入用户昵称:)", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码~~", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1到 15 个字符", trigger: "blur" },
        ],
        // validCode: [
        //   { required: true, message: "请输入验证码~~", trigger: "blur" }
        // ],
      },
    }
  },
  methods: {
    // 从验证码子组件里面获取正确的验证码
    getValidCode(data){
      this.validCode = data;
    },
    login() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          console.log('Sending request to:', '/AdminLoginServlet')
          
          const params = new URLSearchParams();
          params.append('username', this.form.username);
          params.append('password', this.form.password);
          
          console.log('Request data:', Object.fromEntries(params));
          
          request.post('/AdminLoginServlet', params)
            .then(res => {
              console.log('Response:', res)
              if (res === 1) {
    
                  this.$router.push('/home')
                  this.$message.success('登录成功')
                  localStorage.setItem('email', this.form.username);

                }
             
            })
            .catch(error => {
              console.error('Login error details:', error)
              this.$message.error('连接服务器失败: ' + error.message)
            })
        }
      })
    },
    jump(){
      this.$router.push('/manageLogin');
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
  background-image: url('../assets/airport-bg.jpg'); // 需要添加一张机场背景图
  background-size: cover;
  background-position: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
}

.login-card {
  width: 420px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
  position: relative;
  backdrop-filter: blur(10px);
}

.logo-box {
  text-align: center;
  margin-bottom: 20px;
  
  .el-icon-plane {
    font-size: 48px;
    color: #409EFF;
    transform: rotate(-45deg);
  }
}

.title {
  text-align: center;
  color: #1a365d;
  margin-bottom: 10px;
  font-size: 24px;
}

.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: normal;
}

.login-form {
  .el-form-item {
    margin-bottom: 25px;
  }
  
  .el-input {
    .el-input__inner {
      height: 45px;
      border-radius: 8px;
      
      &:focus {
        border-color: #409EFF;
      }
    }
  }
}

.login-btn {
  width: 100%;
  height: 45px;
  border-radius: 8px;
  font-size: 16px;
  background: #409EFF;
  border-color: #409EFF;
  
  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
  }
}

.login-options {
  text-align: center;
  margin-top: 20px;
  
  .el-link {
    font-size: 14px;
    
    i {
      margin-right: 4px;
    }
  }
}
</style>